<template>
    <div class="swiper-wrap">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(item, index) of picDatas" :key="index">
                <!-- 我们写自己的东西的区域   开始 -->
                <img class="swiper-img" :src="item" />
                <!-- 结束 -->
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
//这里都是swiper插件的固定写法，除了那些我备注了的,其他都是固定了这么写的,

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'

export default {
    name: 'DetailSwiper',
    components: {
        swiper,
        swiperSlide
    },
    //我们自定义穿进来的数据
    props: {
        picDatas: Array
    },
    data () {
       return {
         swiperOption: {
            pagination: {
                el: '.swiper-pagination'
            },
            autoplay: true
         }
       }
    }
}
</script>

<style lang="scss" scoped>
  //样式穿透
 .swiper-wrap >>> .swiper-pagination-bullet-active {
     background-color: rgb(2, 133, 255);
 }

 .swiper-slide {
     height: 2rem;
 }

 .swiper-img {
     width: 100%;
     height: 100%;
 }

</style>